import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const LineChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'LineChart',
  title: '折线图',
  category: '图表',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'LineChart',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'string',
      description: '图表宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '图表高度'
    },
    {
      name: 'series',
      propType: 'array',
      description: '数据系列'
    },

    {
      name: 'showGrid',
      propType: 'bool',
      description: '显示网格'
    },
    {
      name: 'showLegend',
      propType: 'bool',
      description: '显示图例'
    },
    {
      name: 'theme',
      propType: 'string',
      description: '主题'
    },
    {
      name: 'onClick',
      propType: 'func',
      description: '点击事件'
    }
  ],
  configure: {
    props: [
      {
        name: 'width',
        title: '图表宽度',
        setter: 'NumberSetter',
        defaultValue: 462
      },
      {
        name: 'height',
        title: '图表高度',
        setter: 'NumberSetter',
        defaultValue: 318
      },

      {
        name: 'showGrid',
        title: '显示网格',
        setter: 'BoolSetter',
        defaultValue: true
      },
      {
        name: 'showLegend',
        title: '显示图例',
        setter: 'BoolSetter',
        defaultValue: true
      },
      {
        name: 'theme',
        title: '主题',
        setter: 'SelectSetter',
        defaultValue: 'dark'
      }
    ],
    supports: {
      style: true
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '折线图',
    screenshot: '',
    schema: {
      componentName: 'LineChart',
      props: {
        width: 462,
        height: 318,

        gridColor: 'rgba(255, 255, 255, 0.15)',
        textColor: 'rgba(255, 255, 255, 0.9)',
        showGrid: true,
        showLegend: true,
        legendPosition: 'top',
        stepY: 120000,
        theme: 'dark',
        series: [
          {
            name: '铁路',
            color: '#FF6B6B',
            data: [
              { time: '6.4', value: 450000 },
              { time: '7.25', value: 520000 },
              { time: '9.14', value: 480000 },
              { time: '11.4', value: 550000 },
              { time: '12.25', value: 500000 },
              { time: '2.14', value: 580000 },
              { time: '4.6', value: 620000 },
              { time: '5.27', value: 460000 }
            ]
          },
          {
            name: '地铁',
            color: '#4ECDC4',
            data: [
              { time: '6.4', value: 280000 },
              { time: '7.25', value: 350000 },
              { time: '9.14', value: 320000 },
              { time: '11.4', value: 380000 },
              { time: '12.25', value: 340000 },
              { time: '2.14', value: 400000 },
              { time: '4.6', value: 420000 },
              { time: '5.27', value: 300000 }
            ]
          },
          {
            name: '公交',
            color: '#45B7D1',
            data: [
              { time: '6.4', value: 180000 },
              { time: '7.25', value: 250000 },
              { time: '9.14', value: 220000 },
              { time: '11.4', value: 280000 },
              { time: '12.25', value: 240000 },
              { time: '2.14', value: 300000 },
              { time: '4.6', value: 320000 },
              { time: '5.27', value: 200000 }
            ]
          },
          {
            name: '出租车',
            color: '#F7DC6F',
            data: [
              { time: '6.4', value: 120000 },
              { time: '7.25', value: 180000 },
              { time: '9.14', value: 150000 },
              { time: '11.4', value: 200000 },
              { time: '12.25', value: 170000 },
              { time: '2.14', value: 220000 },
              { time: '4.6', value: 250000 },
              { time: '5.27', value: 140000 }
            ]
          },
          {
            name: '网约车',
            color: '#BB8FCE',
            data: [
              { time: '6.4', value: 80000 },
              { time: '7.25', value: 150000 },
              { time: '9.14', value: 120000 },
              { time: '11.4', value: 160000 },
              { time: '12.25', value: 140000 },
              { time: '2.14', value: 180000 },
              { time: '4.6', value: 200000 },
              { time: '5.27', value: 100000 }
            ]
          },
          {
            name: '长运',
            color: '#85C1E9',
            data: [
              { time: '6.4', value: 50000 },
              { time: '7.25', value: 80000 },
              { time: '9.14', value: 70000 },
              { time: '11.4', value: 90000 },
              { time: '12.25', value: 85000 },
              { time: '2.14', value: 100000 },
              { time: '4.6', value: 110000 },
              { time: '5.27', value: 60000 }
            ]
          }
        ]
      }
    }
  }
];

export default {
  ...LineChartMeta,
  snippets
}; 